<template>
  <view class="container">
    <view class="tabs">
      <view class="tab" @click="currentTab = 'all'" :class="{ active: currentTab === 'all' }">全部</view>
      <view class="tab" @click="currentTab = '证件'" :class="{ active: currentTab === '证件' }">证件</view>
      <view class="tab" @click="currentTab = '贵重物品'" :class="{ active: currentTab === '贵重物品' }">贵重物品</view>
      <view class="tab" @click="currentTab = '非贵重物品'" :class="{ active: currentTab === '非贵重物品' }">非贵重物品</view>
    </view>
    <view class="list">
      <view class="item" v-for="item in filteredItems" :key="item.id">
        <view class="info">
			<view class="item-id">编号：250115001-{{item.id}}</view>
			<view class="item-category">分类：{{item.category}}</view>
			<view class="item-date">日期：{{item.date}}</view>
		</view>
		<view class="detail">
			<button class="button" round="true" plain="true" type="default">查看详情</button>
		</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'all',
      items: [
        { id: 1, category: '证件', date: '2025-01-15' },
        { id: 2, category: '贵重物品', date: '2025-01-16' },
        { id: 3, category: '非贵重物品', date: '2025-01-17' },
        { id: 4, category: '证件', date: '2025-01-18' }
      ]
    };
  },
  computed: {
    filteredItems() {
      if (this.currentTab === 'all') {
        return this.items;
      } else {
        return this.items.filter(item => item.category === this.currentTab);
      }
    }
  },
  onLoad: function() {
  	uni.setNavigationBarTitle({
  		title:"失物列表"
  	})
  	// 设置导航栏标题颜色
  	uni.setNavigationBarColor({
  	  frontColor: '#ffffff',
  	  backgroundColor: '#721b28'
  	});
  }
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;

	.tabs {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-bottom: 20px;
		border-bottom: solid 1px #ccc;
		.tab {
		  padding: 10px;
		}
		.tab.active {
		  color: #721b28;
		  border-bottom: 3px solid #721b28;
		}
	}

	.list {
		width: 100%;
		.item {
			padding: 10px;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content: space-between;

			.item-id, .item-category, .item-date {
				text-align: left;
				font-size: 26upx;
				padding: 1px;
			}
			
			.detail{
				font-size: 20upx;
				color: #721b28;
				padding-top:50upx;
				.button{
					font-size:20upx;
					border-radius: 30upx;
					padding:0 30upx;
				}
			}
		}
	}
}
</style>
